<template>
  <view class="custom-item u-flex-y-center" @click="$u.route(`/pages/houseMine/customDetail?id=${item.id}`)">
    <u-image :src="prefixURL(item.avatar)" shape="circle" width="136rpx" height="136rpx" :fade="false"></u-image>
    <view class="u-flex-1 u-flex-column u-flex-between u-p-t-5 u-p-b-5  u-m-l-18">
      <view class="u-flex-y-center u-flex-between">
        <view>
          <u-text :text="`${item.real_name} ${item.phone}`" size="14" color="#000"></u-text>
          <u-text :text="`${item.space}m² | ${item.house_type_text || ''} | ${item.renovation}`" margin="12rpx 0 0 0"
            size="12" color="#666"></u-text>
        </view>
        <u-image width="40rpx" height="42rpx" :fade="false" @click="callPhone(item)" src="@/static/images/04_1w.png"
          mode=""></u-image>
      </view>
      <slot name="custom_invite">
        <view class="u-flex-y-center">
          <u-text :text="`${item.xiaoqu.join(' ')}`" color="#333" size="13"></u-text>
          <u-text :text="item.updatetime" color="#666" size="13" align="right"></u-text>
        </view>
      </slot>
    </view>
  </view>
</template>

<script setup>
  import { prefixURL } from '../../../util/util';
  const props = defineProps({
    item: {
      type: Object,
      default: () => {}
    }
  })
  const callPhone = (item) => {
    uni.makePhoneCall({
      phoneNumber: item.phone
    })
  }
</script>

<style lang="scss" scoped>
  .custom-item {
    padding: 20rpx;
    border-radius: 20rpx;
    background: #fff;
    margin: 20rpx;

    >view {
      height: 136rpx;
    }
  }
</style>